<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title></title>
	<link type="text/css" rel="stylesheet" href="${base}/templates/${config.theme}/mobile/css/style.css" />
	<link rel="stylesheet" href="${base}/templates/${config.theme}/mobile/css/swiper.min.css">
	<script src="${base}/templates/${config.theme}/mobile/js/jquery.min.js"></script>
	<style>
		.swiper-container {
			width: 100%;
			height: 100%;
		}
		.swiper-slide {
			text-align: center;
			font-size: 18px;
			background: #fff;

			/* Center slide text vertically */
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
		}
	</style>
	<script src="${base}/templates/${config.theme}/mobile/js/swiper.min.js"></script>

</head>

<body>

<div class="banner">
	<div id="fade_focus">
		<div class="loading"></div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				[@ad_position id = 3]
				[#list adPosition.ads as ad]
				<div class="swiper-slide">
					<a href="${ad.url}">
						<img src="${ad.image}" alt="">
					</a>
				</div>
				[/#list]
				[/@ad_position]
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>
	</div>
</div>
<div class="clear"></div>

<div class="hotTit">
	<div class="hotTitL">
		<img src="${base}/templates/${config.theme}/mobile/images/hotit.png" />
	</div>
	<div class="hotTitR">
		<p>商城开业狂欢！四重大礼等你来抢！</p>
	</div>
</div>
<div class="clear"></div>
<div class="kbox"></div>
<div class="clear"></div>
<div class="likebox">
	<div class="likeTit">
		<img src="${base}/templates/${config.theme}/mobile/images/heart.png" /><span>猜你喜欢</span>
	</div>
	<ul>
		[@product_list count=9 type=3 orderBy="sales desc" ]
		[#list products as product]
		<li>
			<a href="${base}${product.path}">
				<img src="${base}/templates/${config.theme}/mobile/images/shouqing.png" class="shouqing" alt="">
				<img src="${product.image}" class="proimg" />
				<p class="tit">${product.name}</p>
				<div class="pricebox">
					<p class="price">￥${product.price}</p>
					<div class="buy">购买</div>
					<div class="clear"></div>
				</div>
			</a>
		</li>
		[/#list]
		[/@product_list]

	</ul>
</div>
<div class="fbox"></div>
<div class="footbox">
	<div class="footer">
		<ul>
			<li class="on">
				<a href="${base}/">
					<img src="${base}/templates/${config.theme}/mobile/images/f1.png" />
					<p>首页</p>
				</a>
			</li>
			<li>
				<a href="${base}/category">
					<img src="${base}/templates/${config.theme}/mobile/images/f02.png" />
					<p>分类</p>
				</a>
			</li>
			<li>
				<a href="${base}/cart/list">
					<img src="${base}/templates/${config.theme}/mobile/images/f03.png" />
					<p>购物车</p>
				</a>
			</li>
			<li>
				<a href="${base}/member">
					<img src="${base}/templates/${config.theme}/mobile/images/f04.png" />
					<p>我的</p>
				</a>
			</li>
		</ul>
	</div>
</div>

<script>
	var swiper = new Swiper('.swiper-container', {
		spaceBetween: 30,
		centeredSlides: true,
		autoplay: {
			delay: 2500,
			disableOnInteraction: false,
		},
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});
</script>
</body>

</html>